<script lang="ts">
    import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
    import VirtualScroll from '$lib/components/Basic/VirtualScroll/VirtualScroll.svelte';
    import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
    const code1 = `<script lang="ts">
    import VirtualScroll from '$lib/components/Basic/VirtualScroll/VirtualScroll.svelte';
    // 生成 10000 条数据
    function generateData(length: number) {
        return Array.from({ length }, (_, i) => ({
            id: i + 1,
            name: \`第 \${i + 1} 项\`,
        }));
    }
    let data = generateData(10000);
<\/script>
<div class="example">
    <div class="example-group">
        <VirtualScroll height="300px" itemHeight={40} gap={10} bufferSize={10} data={data}>
            {#snippet children({ visibleStartIndex, visibleEndIndex })}
            <div class="horizontal-container">                        
                {#each data.slice(visibleStartIndex, visibleEndIndex) as item}
                    <div class="horizontal-bar">{item.name}</div>
                {/each}
            </div>
            {/snippet}
        </VirtualScroll>
    </div>
</div>
<\style scoped lang="scss">
.horizontal-container{
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 0 2px;
}
.horizontal-bar{
    height: 40px;
    width: 100%;
    background-color: var(--color-secondary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--color-secondary-500);
}
</style>`;
const attributesData = [
        { id: 1, name: 'data', describe: '数据数组', type: 'Array<T>', defaulValue: '必填' },
        { id: 2, name: 'bufferSize', describe: '属性设置，缓存项数，虚拟滚动条', type: 'number', defaulValue: '30' },
		{ id: 3, name: 'height', describe: '属性设置，滚动条容器高度，虚拟滚动条', type: 'string', defaulValue: '100%' },
        { id: 4, name: 'itemHeight', describe: '属性设置，每个项的高度，虚拟滚动条', type: 'number', defaulValue: '必填' },
        { id: 5, name: 'gap', describe: '属性设置，每个项之间的间距', type: 'number', defaulValue: '0' },
        { id: 6, name: 'styles', describe: '属性设置，自定义样式', type: 'string', defaulValue: '' },
	];
const eventsData = [
    { id: 1, name: 'onScroll', describe: '滚动条事件回调', type: '(e: MouseEvent) => void' },
    { id: 2, name: 'onScrollPositionChange', describe: '滚动位置变化事件回调', type: '({ scrollLeft: number, scrollTop: number }) => void' },
];
function generateData(length: number) {
    return Array.from({ length }, (_, i) => ({
        id: i + 1,
        name: `第 ${i + 1} 项`,
    }));
}
let data = generateData(10000);
</script>
<div class="component-container">
	<div class="title">
		<div class="name">virtualScroll 虚拟滚动条</div>
		<div class="describe">虚拟滚动条对原生滚动条进行了封装，只加载当前可见区域的内容，通过鼠标hover来控制显示和隐藏的效果。</div>
	</div>
	<div class="subtitle">
		<div class="name">竖向滚动条</div>
		<div class="describe">
			通过&nbsp;&nbsp;<span class="tag">height</span>&nbsp;&nbsp;属性设置滚动条容器高度，通过&nbsp;&nbsp;<span class="tag">itemHeight</span>&nbsp;&nbsp;属性设置每个项的高度。「height、itemHeight」目前只支持
            <span class="keyword">固定高度</span>。
		</div>
    </div>
    <ComponentPreview code={code1}>
        <div class="example">
            <div class="example-group">
                <VirtualScroll height="300px" itemHeight={40} gap={10} bufferSize={10} data={data}>
                    {#snippet children({ visibleStartIndex, visibleEndIndex })}
                    <div class="horizontal-container">                        
                        {#each data.slice(visibleStartIndex, visibleEndIndex) as item}
                            <div class="horizontal-bar">{item.name}</div>
                        {/each}
                    </div>
                    {/snippet}
                </VirtualScroll>
            </div>
        </div>
    </ComponentPreview>
    <div class="subtitle">
		<div class="name">virtualScroll Attributes</div>
	</div>
    <Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
                    {#if Array.isArray(scope.row.type)}
                    <span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
                        {#each scope.row.type as item}
                            <span class="tag">{item}</span>
                        {/each}
                    </span>
                    {:else}
                        <span>{scope.row.type}</span>
                    {/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
    <div class="subtitle">
		<div class="name">virtualScroll Events</div>
	</div>
    <Table data={eventsData} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>
</div>
<style scoped lang="scss">
    .horizontal-container{
        display: flex;
        gap: 10px;
        flex-direction: column;
        padding: 0 2px;
    }
    .horizontal-bar{
        height: 40px;
        width: 100%;
        background-color: var(--color-secondary-100);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: var(--color-secondary-500);
    }
</style>